<template>
  <div class="rating">
    <i 
      class="iconfont" 
      v-for="(item,index) in iconfontData" 
      :class="item" 
      :key="index"
    >
    </i>
  </div>
</template>

<script>
export default {
  name: 'HomeRating',
	props: {
		rating: Number,
	},
  data() {
    return {
      iconfontData: [],
    }
  },
	mounted() {
		let rating = this.rating
		let star = Math.floor(rating)
		let starHalf = Math.floor(rating * 2) % 2
		for(let i=0; i<star; i++) {
			// 满星
			this.iconfontData.push("icon-star")
		}
		if(starHalf) {
			// 半星
			this.iconfontData.push("icon-star-half-empty")
		}
		for(let j=this.iconfontData.length; j<5; j++){
			// 空星
			this.iconfontData.push("icon-star-o")
		}
	}
}
</script>

<style scoped>
.rating { display: inline; color: #ffc600; margin-right: 2vw;}
.rating i { font-style:normal;}
.iconfont { font-size: 3vw;}
</style>
